<template>
  <div class="container">
    <div class="box">
      <div class="avatar margin-top-lg">
        <van-image
          round
          width="6rem"
          height="6rem"
          fit="cover"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
        />
      </div>
      <div class="login">
        <div class="username justify-center margin-top-sm">
          <input class="solid padding-left-lg" type="text" v-model="phone" placeholder="手机号码" />
        </div>
        <div class="justify-center margin-top-sm">
          <van-cell-group>
            <van-field
              v-model="code"
              center
              clearable
              label="验证码"
              placeholder="请输入短信验证码"
              label-width="60"
            >
              <template #button>
                <van-button
                  size="small"
                  type="info"
                  @click="getCode"
                  maxlength="4"
                  v-if="second==60"
                >发送验证码</van-button>
                <van-button plain hairline disabled type="info" size="small" v-else>{{`${second}s后尝试`}}</van-button>
              </template>
            </van-field>
          </van-cell-group>
        </div>
        <button
          type="submit"
          class="submit margin-top-lg solid"
          :class="phone==''||code==''?'bg-disable':'bg-active'"
          @click="submit"
        >登录</button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Login",
  components: {},
  data() {
    return {
      phone: "",
      code: "",
      send: false,
      second: 60
    };
  },
  computed: {},
  methods: {
    //登录提交
    submit() {
      let { phone, code } = this;
      console.log("", phone, code);
      let data = {
        phone,
        code
      };
      console.log("", this);
      if (phone == "") {
        this.$toast("手机不能为空");
      } else if (code == "") {
        this.$toast("验证码不能为空");
      } else {
        console.log("this.$ajax", this.$ajax);
        this.$ajax.post({ url: "App/ownerLogin", data }).then(res => {
          console.log("res", res);
          if (res.status_code == 200) {
            window.localStorage.setItem("token", JSON.stringify(res.data));
            this.$toast.success(res.message);
            this.$router.push({ path: "/my" });
          }
        });
      }
    },
    // 获取验证码
    getCode() {
      let data = {
        phone: this.phone
      };
      this.$ajax.post({ url: "App/getcode", data }).then(res => {
        console.log("res", res);
        if (res.status_code == 200) {
          this.countTime();
        }
      });
    },
    // 倒计时
    countTime() {
      let timer = setInterval(() => {
        this.second = this.second - 1;
        if (this.second == 0) {
          clearInterval(timer);
          this.second = 60;
        }
      }, 1000);
      console.log("timer", timer);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
}
.login {
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  top: 30px;
}
.box {
  position: absolute;
  width: 80%;
  height: 400px;
  left: 50%;
  top: 100px;
  transform: translateX(-50%);
  border-radius: 20px;
  box-shadow: 0 0 5px #000;
  .login {
    position: relative;
    width: 80%;
    height: 150px;
    .username {
      input {
        height: 50px;
        border-radius: 80px;
      }
    }
    .code {
      border: 1px solid #cccccc;
      border-radius: 50px;
    }
    .submit {
      border-radius: 5px;
      width: 80%;
      height: 40px;
    }
  }
}
</style>